<template>
  <div class="Pie-Rose" ref="chart"></div>
</template>

<script>
import pieOptions from "@/MCharts/components/pie/options";
import {px2} from "@/MCharts/style/Style";
export default {
  name: "MChartsPie",
  data() {
    return {}
  },
  props:{
    data: {},
    options: {},
    type: String,
    width:{
      type: Number,
      default: 400
    },
    height:{
      type: Number,
      default: 400
    }
  },
  components: {},
  watch: {
    data: {
      handler: function (e) {
        this.init()
      },
      deep: true
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    px2,
    init(){
      let chartDom = this.$refs.chart
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(chartDom);

      // 指定图表的配置项和数据
      var option = pieOptions.getOptions(this.data, this.options, 'Rose');

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  }
}
</script>

<style lang="scss" scoped>
@import "@/MCharts/style/var.scss";
  .Pie-Rose{
    height: 100%;
    width: 100%;
  }
</style>
